<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<!-- 跳过组件 -->
	<view id="timer" @click="skip">
		<view class="timer-text">跳过</view>
		<view class="timer-round">
			<view class="left wrap">
				<view class="left-radius radius"></view>
			</view>
			<view class="right wrap">
				<view class="right-radius radius"></view>
			</view>
		</view>
	</view>
	<!-- 背景图 -->
	<view class="" style="height: 100vh;overflow: hidden;">
		<!-- aspectFill、 widthFix -->
		<up-image :show-loading="true" :src="startSrc" width="100vw" height="100vh" mode="aspectFill">
			<template v-slot:loading>
				<up-loading-icon color="#7BDECC"></up-loading-icon>
			</template>
		</up-image>
	</view>
</template>

<script setup>
	import {
		userInfoStore
	} from '@/stores/user';
	import {
		configInfoStore
	} from '@/stores/config';
	const configStore = configInfoStore()
	const userStore = userInfoStore();
	const timer = ref(null);
	const startSrc = ref('')
	onReady(() => {})
	onLoad(() => {
		// console.log('initinitinti', getApp().globalData);
		getStartConfig();
		const token = uni.getStorageSync('user_token');
		if (token) {
			getUserInfo();
			// userStore.getOpenId()
		}
		timer.value = setTimeout(() => {
			uni.switchTab({
				url: '/pages/main/main'
			})
		}, 5000)
	})
	onUnload(() => {
		clearTimeout(timer.value);
		timer.value = null;
	})
	const skip = () => { //跳过
		clearTimeout(timer.value);
		timer.value = null;
		uni.switchTab({
			url: '/pages/main/main'
		})
	}
	const getUserInfo = async () => { //获取用户信息
		userStore.getUserInfo();
	}
	const getStartConfig = async () => {
		const res = await $Api.login.getStartConfig();
		if (res.code === 1) {
			// configStore.configInfo = res.data;
			if (res.data.length > 0) {
				let newObj = {}
				res.data.forEach(val => {
					newObj[val.name] = val;
					// newObj[val.name] = val.value;
				})
				configStore.configInfo = newObj;
				// console.log('configStore.configInfo', newObj);
				startSrc.value = newObj.start_page.value;
			}
		} else {
			uni.$u.toast(res.msg);
		}
	}
</script>

<style lang="scss" scoped>
	#timer view {
		box-sizing: border-box;
	}

	#timer {
		position: fixed;
		width: 72rpx;
		height: 72rpx;
		bottom: 120rpx;
		right: 48rpx;
		z-index: 999;
	}

	.timer-text {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFFFFF;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
	}

	.timer-round {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.wrap {
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		overflow: hidden;
	}

	.left {
		left: 0;
	}

	.right {
		right: 0;
	}

	.radius {
		width: 200%;
		height: 100%;
		border-radius: 50%;
		position: absolute;
		top: 0;
		border: 6rpx solid #7EDE9E;
	}

	.left-radius {
		left: 0;
		transform: rotate(45deg);
		border-left-color: #fff;
		border-bottom-color: #fff;
		animation: leftRadius 4s linear;
		/*动画停留在最后一帧*/
		animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
	}

	.right-radius {
		right: 0;
		transform: rotate(45deg);
		border-right-color: #fff;
		border-top-color: #fff;
		animation: rightRadius 4s linear;
		/*动画停留在最后一帧*/
		animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
	}

	@keyframes leftRadius {
		0% {
			transform: rotate(45deg);
		}

		50% {
			transform: rotate(45deg);
		}

		100% {
			transform: rotate(225deg);
		}
	}

	@keyframes rightRadius {
		0% {
			transform: rotate(45deg);
		}

		50% {
			transform: rotate(225deg);
		}

		100% {
			transform: rotate(225deg);
		}
	}
</style>